import React from 'react';
import { Table, Icon, Button, Popconfirm, Select, DatePicker } from 'antd';
import router from 'umi/router';
import ModalC from 'components/Modal/date';
import { connect } from 'dva';
import moment from 'moment';
import styles from './index.less';
import Echarts from 'echarts';

const Option = Select.Option;

@connect(state => ({
  dnsRank: state.dnsRank,
}))
class Pages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      deviceId: null,
      isRealTime: true,
    };
    this.timer = null;
  }

  //获取所有设备
  getAllDevices = () => {
    this.props.dispatch({
      type: 'dnsRank/getAllDevices',
      payload: {},
      callback: data => {
        this.setState(
          {
            deviceId: data.id,
          },
          () => this.dataHandle()
        );
      },
    });
  };

  select = value => {
    clearInterval(this.timer);
    this.myChart.setOption({
      series: [{ data: [] }],
    });
    this.myChart.showLoading();
    this.setState(
      {
        deviceId: value,
      },
      () => this.dataHandle()
    );
  };

  /**
   * 实时历史数据切换
   */
  typeToggle = () => {
    const { isRealTime } = this.state;
    if (isRealTime) {
      //切换历史数据
      this.setState({
        visible: true,
      });
    } else {
      //开启实时数据
      this.setState({
        isRealTime: true,
      });
      this.dataHandle();
    }
  };

  submit = value => {
    const { deviceId } = this.state;
    this.props.dispatch({
      type: 'dnsRank/getAllDnsRank',
      payload: {
        ...value,
        deviceId,
      },
      callback: data => {
        clearInterval(this.timer);
        this.setState({
          visible: false,
          isRealTime: false,
        });
        let dataArr = [];
        let ipArr = [];
        for (let item of data.reverse()) {
          ipArr.push(item.ip);
          dataArr.push(item.parseCount);
        }
        this.myChart.hideLoading();
        this.myChart.setOption({
          yAxis: [{ data: ipArr }],
          series: [{ data: dataArr }],
        });
      },
    });
  };

  closeModal = () => {
    this.setState({
      visible: false,
    });
  };

  //获取数据
  getCurrentData = () => {
    const { deviceId } = this.state;
    this.props.dispatch({
      type: 'dnsRank/getCurrentDnsRank',
      payload: {
        deviceId,
      },
      callback: data => {
        let dataArr = [];
        let IpArr = [];
        for (let item of data.reverse()) {
          dataArr.push(item.Count);
          IpArr.push(item.Key);
        }
        this.myChart.hideLoading();
        this.myChart.setOption({
          series: [
            {
              data: dataArr,
            },
          ],
          yAxis: {
            data: IpArr,
          },
        });
      },
    });
  };

  /**
   * 数据处理
   */
  dataHandle = () => {
    this.getCurrentData();
    this.timer = setInterval(() => {
      this.getCurrentData();
    }, 5000);
  };

  //刷新
  fresh = () => {
    const { deviceId } = this.state;
    this.props.dispatch({
      type: 'dnsRank/getFreshDns',
      payload: {
        deviceId,
      },
    });
  };

  /**
   * 初始化图
   */
  dataMapInit = () => {
    var option = {
      title: {
        text: '解析排名',
      },
      tooltip: {},
      legend: {
        data: ['解析次数'],
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
      },
      yAxis: {
        type: 'category',
      },
      series: [
        {
          name: '解析次数',
          type: 'bar',
        },
      ],
    };
    this.myChart = Echarts.init(this.refs.dataMap);
    this.myChart.setOption(option);
  };

  componentDidMount() {
    this.getAllDevices();
    this.dataMapInit();
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    const {
      dnsRank: { allDevices },
    } = this.props;
    const { visible, formatData, deviceId, isRealTime } = this.state;

    return (
      <>
        <h3 className="head">数据中心</h3>
        <div style={{ padding: '10px 20px' }}>
          <Button onClick={this.typeToggle} style={{ float: 'right' }} type="primary">
            {isRealTime ? (
              '查看历史数据'
            ) : (
              <span>
                <Icon type="clock-circle" /> 实时数据
              </span>
            )}
          </Button>
          <Button
            onClick={this.fresh}
            style={{ float: 'right', marginRight: '10px' }}
            type="primary"
          >
            刷新
          </Button>

          <div>
            <span>设备:</span>
            <Select
              disabled={!isRealTime}
              value={deviceId}
              onChange={this.select}
              style={{ width: '150px', marginLeft: '10px' }}
            >
              {allDevices.map(item => (
                <Option value={item.id} key={item.id}>
                  {item.deviceName}
                </Option>
              ))}
            </Select>
          </div>

          <div className={styles.wrapper}>
            <div ref="dataMap" className={styles.root} />
          </div>
          <ModalC
            visible={visible}
            close={this.closeModal}
            formatData={formatData}
            submit={this.submit}
          />
        </div>
      </>
    );
  }
}

export default Pages;
